/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {ConfigProvider, Slider} from '@alifd/next';

@ConfigProvider.config
class DashboardCard extends React.Component {
    static displayName = 'DashboardCard';

    static propTypes = {
        locale: PropTypes.object,
        data: PropTypes.object,
        height: PropTypes.number,
    };

    render() {
        const {data = {}, height, locale = {}} = this.props;
        return (
            < div >
            {
                data.modeType === 'notice' ? (
                    < div data - spm - click = {'gostr=/aliyun;locaid=notice'} >
                    < Slider style = {
        {
            marginBottom: data.modeList.length > 1 ? 20 : 10
        }
    }
        arrows = {false} >
            {
                data.modeList.map((item, index) => (
                    < div key = {index} className = {'slider-img-wrapper'} >
                < div
                className = {'alert alert-success'}
                style = {
        {
            minHeight: 120, backgroundColor
        :
            '#e9feff'
        }
    }
    >
    <
        div
        className = {'alert-success-text'}
        style = {
        {
            fontWeight: 'bold'
        }
    }>
        {
            locale.importantReminder0
        }
    <
        /div>
        < strong
        style = {
        {
            color: '#777a7e'
        }
    }>
    <
        span > {item.title} < /span>
        < /strong>
        < strong >
        < span >
        < a
        style = {
        {
            marginLeft: 10, color
        :
            '#33cde5'
        }
    }
        href = {item.url}
        target = {'_blank'}
            >
            {locale.viewDetails1}
            < /a>
            < /span>
            < /strong>
            < /div>
            < /div>
    ))
    }
    <
        /Slider>{' '}
        < /div>
    ) :
        (
        < div
        className = {'dash-card-contentwrappers'}
        style = {
        {
            height: height || 'auto'
        }
    }
        data - spm - click = {`gostr=/aliyun;locaid=${data.modeType}`
    }
    >
    <
        h3
        className = {'dash-card-title'} > {data.modeName} < /h3>
            < div
        className = {'dash-card-contentlist'} >
            {
                data.modeList
                    ? data.modeList.map(item => (
                        < div className = {'dash-card-contentitem'} >
                        < a href = {item.url} target = {'_blank'} >
                {item.title}
                < /a>
        {
            item.tag === 'new' ? (
                < img
                style = {
            {
                width: 28, marginLeft
            :
                2, verticalAlign
            :
                'text-bottom'
            }
        }
            src = {'//img.alicdn.com/tps/TB1pS2YMVXXXXcCaXXXXXXXXXXX-56-24.png'}
            alt = ""
                / >
        ) :
            (
                ''
            )
        }
        {
            item.tag === 'hot' ? (
                < img
                style = {
            {
                width: 28, marginLeft
            :
                2, verticalAlign
            :
                'text-bottom'
            }
        }
            src = {'//img.alicdn.com/tps/TB1nusxPXXXXXb0aXXXXXXXXXXX-56-24.png'}
            alt = ""
                / >
        ) :
            (
                ''
            )
        }
    <
        /div>
    ))
    :
        ''
    }
    <
        /div>
        < /div>
    )
    }
        {
            ' '
        }
    <
        /div>
    )
        ;
    }
}

export default DashboardCard;
